// subPages/glucometer/bloodSugarTrend/bloodSugarTrend.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp()
var util =  require('../../../utils/util.js');
var jsonData =  require('../../../data/trendLegendJson');
let Chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      // lazyLoad: true // 延迟加载
    },
    item: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      legendList: jsonData.legendList
    })
    if(options.item != 'undefined' && options.item != null){
      that.setData({
        item: JSON.parse(options.item)
      })
      wx.setNavigationBarTitle({
        title: that.data.item.nickName + '的数据分析' //页面标题为路由参数
      })
    }
    that.barchartsComponnet = that.selectComponent('#mychart');
    that.getbloodSugarTrendData();
    
  },

  getbloodSugarTrendData:function(){
    var that = this
    var id = ''
    if(that.data.item != null){
      id = that.data.item.userId
    }else{
      id = app.globalData.userId
    }
    wx.request({
      url: app.globalData.apiUrl +'/blood/qst',
      data: {
        userId: id
      },
      method: 'get',
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function (res) {
        // console.log(res)
        if(res.statusCode == '200'){
          that.trendDataList(res.data)
        }
        else{
          util.showModal('提示','数据异常')
          return;
        }
      },
      fail: function (res) {
        console.log("失败",res);
      }
    })
  },

  //处理血糖趋势数据
  trendDataList:function(list){
    var that = this
    let beforeBreakfast = []
    let afterBreakfast = []
    let beforeLunch = []
    let afterLunch = []
    let beforeDinner = []
    let afterDinner = []
    let time = []
    for(let i in list)
    {
      for(let j in list[i])
      {
        if(list[i][j].type == 1){
          beforeBreakfast.push(list[i][j].blood)
          time.push(util.setTime4(list[i][j].createtime))
        }
        if(list[i][j].type == 2){
          afterBreakfast.push(list[i][j].blood)
        }
        if(list[i][j].type == 3){
          beforeLunch.push(list[i][j].blood)
        }
        if(list[i][j].type == 4){
          afterLunch.push(list[i][j].blood)
        }
        if(list[i][j].type == 5){
          beforeDinner.push(list[i][j].blood)
        }
        if(list[i][j].type == 6){
          afterDinner.push(list[i][j].blood)
        }
      }
    }
    that.setData({
      beforeBreakfast: beforeBreakfast,
      afterBreakfast: afterBreakfast,
      beforeLunch: beforeLunch,
      afterLunch: afterLunch,
      beforeDinner: beforeDinner,
      afterDinner: afterDinner,
      time: time
    })
    that.init_echarts();
  },


  //初始化图表
  init_echarts: function () {
    var that = this
    that.barchartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.showLoading({
        text : '正在努力的读取数据中...'
      });
      Chart.setOption(that.getOption()); //获取新数据
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  //设置图表
  getOption: function () {
    var that = this
    // 指定图表的配置项和数据
    var option = {
      title : {
        text: '',
        subtext: ''
      },
      grid:{ 
        x:25,
        y:45,
        x2:40,
        y2:20,
        borderWidth:0
      },
      xAxis: {
        type: 'category',
        data: that.data.time,
        axisLine:{
          show:true,
          lineStyle:{
              color: '#979797',
              width:2,
              type: 'solid',
              opacity: 1
          }
        },
        axisTick:{
          show:false
        },
        axisLabel:{
          show: true,
        },
        name: '日期',
        nameLocation: 'end',
        // nameGap: 20 ,
        nameTextStyle: {
          color:'#545353'
        },
      },
      yAxis: {
        type: 'value',
        name: 'mmol/L',
        nameTextStyle: {
          color:'#545353'
        },
        axisLine:{
          show:true,
          lineStyle:{
              color: '#979797',
              width:2,
              type: 'solid',
              opacity: 1
          }
        },
        axisTick:{
          show:false
        },
        splitLine:{
          show:false
        },
        min: 0,
        max: 20
      },
      series : [{
        name:'早餐前',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
            opacity: 1
          }
        },
        data: that.data.beforeBreakfast
      },{
        name:'午餐前',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
            opacity: 0
          }
        },
        data: that.data.beforeLunch
      },{
        name:'晚餐前',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
              opacity: 0
          }
        },
        data: that.data.beforeDinner
      },{
        name:'早餐后',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
            opacity: 0
          }
        },
        data: that.data.afterBreakfast
      },{
        name:'午餐后',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
            opacity: 0
          }
        },
        data: that.data.afterLunch
      },{
        name:'晚餐后',
        type:'line',
        smooth: true,
        symbol: "none",
        itemStyle : {
          normal: {
            color: '#5d6ed2'
          }
        },
        lineStyle:{
          normal:{
            opacity: 0
          }
        },
        data: that.data.afterDinner
      },]
    };
    Chart.hideLoading()
    return option;
  },

  legendBtn:function(e){
    var that = this
    var item = e.currentTarget.dataset.item;
    var option = that.getOption()
    var list = that.data.legendList
    for(var i in list){
      if(list[i].check){
        if(item.name == list[i].name){
          list[i].check = false;
          option.series[i].lineStyle.normal.opacity = 0;
        }
        else{
          option.series[i].lineStyle.normal.opacity = 1;
          option.series[i].itemStyle.normal.color = list[i].color;
        }
      }else{
        if(item.name == list[i].name){
          list[i].check = true;
          option.series[i].lineStyle.normal.opacity = 1;
          option.series[i].itemStyle.normal.color = item.color;
        }else{
          option.series[i].lineStyle.normal.opacity = 0;
        }
      }
    }
    that.setData({
      legendList: list,
    })
    Chart.clear();
    Chart.setOption(option,true)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})